<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3——新增选择器</title>
    <style>
        /* 属性值前戳匹配 */
        .content[lang^="en"]{
            color:red;
        }
        /* 属性值后戳匹配 */
        a[href$=".docx"]{
            background:url('images/word.jpg') right 0 no-repeat;
            padding-right:25px;
        }
        a[href$=".pdf"]{
            background:url('images/pdf.jpg') right 0 no-repeat;
            padding-right:25px;
        }
        /* 属性值全部匹配 */
        img[src*="png"]{
            border:2px solid gray;
        }

        /* 根选择器，相当于html{} */
        html:root{
            font-family: Arial, Helvetica, sans-serif;
            font-size:16px;
        }
        /* 索引选择器，1代表第一个、odd或2n+1 奇数、even或2n 偶数 */
        p span:nth-child(1){
            font-size:16px;
        }
        p span:nth-child(odd){
            font-size:36px;
        }
        p span:nth-child(even){
            font-size:50px;
        }
        /* 索引选择器，和 :nth-child 一样 */
        p span:nth-of-type(4){
            font-size:50px;
        }
        /* 匹配第一个元素 */
        p span:first-child{
            color:orange;
        }
        /* 匹配最后一个元素 */
        p span:last-child{
            color:rgb(38, 130, 235);
        }
        /* 匹配仅有一个子元素 */
        .only:only-child{
            color:rgb(38, 235, 209);
        }
        /* 匹配有多个子元素，但只有一个是同类子元素 */
        .onlyOfType:only-of-type{
            color:rgb(179, 38, 235);
        }
        /* 过滤某个选择器 */
        .abc:not(span){
            font-size:20px;
        }
        /* 同级兄弟选择器 */
        .def ~ div{
            font-size:20px;
        }
    </style>
</head>
<body>
    <div class="content" lang="en-us">
        abc
    </div>
    <div class="content" lang="fr-argot">
        abc
    </div>
    <p>
        <a href="http://www.baidu.com/1.docx">word文档</a>
    </p>
    <p>
        <a href="http://www.baidu.com/1.pdf">pdf电子书</a>
    </p>
    <p>
        <img src="images/border.png"/>
    </p>
    <p>
        <span>36号字</span>
        <span>50号字</span>
        <span>36号字</span>
        <span>50号字</span>
    </p>
    <div>
        <span class="only">只有一个子元素</span>
    </div>
    <div>
        <span class="onlyOfType">有多个子元素，但都是不同的子元素</span>
        <em class="onlyOfType">有多个子元素，但都是不同的子元素</em>
        <strong class="onlyOfType">有多个子元素，但都是不同的子元素</strong>
    </div>
    <div>
        <span class="abc">类都是abc，但我被过滤了</span>
        <em class="abc">类都是abc，tt是20字号</em>
        <strong class="abc">类都是abc，strong是20字号</strong>
    </div>
    <div class="def">我字号不变</div>
    <div>我字号20，我是def类的兄弟元素</div>
</body>
</html>